{% extends "base.html" %}

{% block content %}
    <div class="row">
        <div class="col-xs-12 col-sm-9 col-sm-offset-3 map-wrapper">
            <div id="map"></div>
        </div>
        <div class="col-xs-12 col-sm-3 sidebar">
            <div id="options-panel" class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse"
                    data-target="#collapseOptionsBody">
                    <div class="panel-title">
                        Options
                    </div>
                </div>
                <div id="collapseOptionsBody" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <ol class="breadcrumb">
                            <li>
                            <span class="glyphicon glyphicon-globe"></span>
                            Organization
                            </li>
                        </ol>
                        <!--<p>
                            <span class="glyphicon glyphicon-globe"></span>
                            Organization:
                        </p>-->
                        <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="organisation">
                            World Bank <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a onclick="changeOrganzation('TWB');">World Bank</a></li>
                            <li><a onclick="changeOrganzation('UNDP');">UNDP</a></li>
                            <li class="divider"></li>
                            <li><a onclick="changeOrganzation('TWB+UNDP');">World Bank &amp; UNDP</a></li>
                        </ul>
                        </div>
                        <hr/>
                        <ol class="breadcrumb">
                            <li>
                            <span class="glyphicon glyphicon-time"></span>
                            Time interval
                            </li>
                        </ol>
                        <!--<p>
                            <span class="glyphicon glyphicon-time"></span>
                            Time interval:
                        </p>-->
                        <input id="timeSliderTempl" type="text" class="span2"
                            value=""
                            data-slider-min="2010"
                            data-slider-max="2014"
                            data-slider-step="1"
                            data-slider-value="[2010,2013]"
                            data-slider-orientation="horizontal"
                            data-slider-selection="after"
                            data-slider-tooltip="hide"
                            data-slider-id="timeSlider">
                        <hr/>
                        <ol class="breadcrumb">
                            <li>
                            <span class="glyphicon glyphicon-user"></span>
                            Per capita
                            <input type="checkbox" id="perCapitaCheckbox">
                            </li>
                    </div>
                </div>
            </div>
            <div id="country-panel" class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse"
                    data-target="#collapseCountryBody">
                    <div class="panel-title">
                        Info
                    </div>
                </div>
                <div id="collapseCountryBody" class="panel-collapse collapse in">
                    <div class="panel-body">
                        Click on the country you are interested in. 
                    </div>
                </div>
            </div>
            <div id="legend-panel" class="panel panel-info">
                <div class="panel-heading" data-toggle="collapse"
                    data-target="#collapseLegendBody">
                    <div class="panel-title">
                        Legend
                    </div>
                </div>
                <div id="collapseLegendBody" class="panel-collapse collapse in">
                    <div class="panel-body">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block action %}
<script>window.onload = initMapControl</script>
{% endblock %}


{% block bodyClass %}
class = ".background-sea"
{% endblock %}
